<template>
    <div class="tool">
        <a href="#" class="tool-item"><div class="icon iconfont iconphone"></div><span class="text">手机APP</span>
        <div class="app-content">
            <img src="../assets/uploads/wx-img.png" alt="">
            <p>扫码领取新人百元礼包</p>
        </div>
        </a>
        <a href="#" class="tool-item"><div class="icon iconfont iconuser"></div><span class="text">个人中心</span></a>
        <a href="#" class="tool-item"><div class="icon iconfont iconbuoumaotubiao46"></div><span class="text">售后服务</span></a>
        <a href="#" class="tool-item"><div class="icon iconfont iconkefu"></div><span class="text">人工客服</span></a>
        <a href="#" class="tool-item"><div class="icon iconfont iconcart"></div><span class="text">购物车</span></a>
        <a href="#" class="tool-item" id="goback"><div class="icon iconfont icondingbu"></div><span class="text">回顶部</span></a>
    </div>
</template>
<script>
// 返回顶部
// js版
// window.onload=function(){
//     var goBack=document.getElementById('goback')
//     window.addEventListener('scroll',function(){
//         if(window.pageYOffset>=600){
//             goBack.style.display='block'
//         }
//         else{
//             goBack.style.display='none'
//         }
//     })
//     // 回顶部
//     goBack.addEventListener('click',function(){
//         window.scroll(0,0)
//     })
// }
// jqurery版
import $ from 'jquery'
$(function(){
    $(window).scroll(function(){
        // window也行
        if($(document).scrollTop()>=600){
            // $('#goback').stop().slideDown(1000)  //这个会出现一个奇奇怪怪的效果
            $('#goback').stop().animate({
                height:"90px"
            },1000)
            // 会变成inline
            // $('#goback').css("height","90px")
            // 如果点击重新加载，会变形    解决不用display，用height
        }else{
            // $('#goback').stop().slideUp(1000)
            $('#goback').stop().animate({
                height:"0px"
            },1000)
        }
    })
    $("#goback").click(function(){
        // 加在body或html才有动画
        $("body,html").stop().animate({
            scrollTop:0
        })
    })
})
export default {
    
}
</script>
<style scoped>
.tool{
    z-index: 99999;
    position: fixed;
    right: 0;
    bottom: 100px;
}
.tool .tool-item{
    position: relative;
    display: block;
    width: 82px;
    height: 90px;
    margin-top: -1px;
    background-color: #fff;
    border: 1px solid #f5f5f5;
    text-align: center;
    font-size: 14px;
    color: #757575;
    transition: color .3s;
}
.tool .tool-item .icon{
    line-height: 50px;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    padding-top: 10px;
    font-size: 24px;
}

.tool a:hover{
    color: #ff6700;
}
.tool a:hover .text{
    color: #ff6700;
}
.tool .tool-item:last-child{
    height: 0px;
    margin-top: 18px;
    overflow: hidden;
}
/* 弹出二维码 */
.tool .app-content{
    position: absolute;
    left: -130px;
    top: -40px;
    padding: 14px;
    background: #fff;
    border: 1px solid #f5f5f5;
    transition: opacity .3s;
    opacity: 0;
    visibility: hidden;
    z-index: 400;
}
.tool .app-content img{
    display: block;
    width: 100px;
    height: 100px;
    margin: 6px auto;
    z-index: 40;
}
.tool .app-content p{
    display: block;
    width: 82px;
    margin: 14px auto 0;
    color: #757575;
    text-align: center;
}
.tool a:hover .app-content{
    opacity: 1;
    visibility: visible;
}
</style>